<template>
  <div class="BuyVoucher_box">
    <!--v-loading="loading"-->
    <div class="BuyVoucher_box_text1">
      {{ $t("button.Main1") }}
    </div>
    <div class="BuyVoucher_box_text2"></div>
    <div class="BuyVoucher_box_text3">
      <span class="span1">Main Board : ID {{ id }}</span
      ><span class="span2"
        >My level : <span style="color: skyblue"> Level. {{ Level }}</span>
      </span>
    </div>
    <div class="footers">
      <tree :treeData="treeData" :treeFirst="true"></tree>
    </div>
    <div class="span4">Level-{{ Level }}</div>
  </div>
</template>

<script>
import { index } from "@/api/user.js"; //  介绍 提现 提现记录
import tree from "./TreeItem1.vue";

export default {
  components: {
    tree,
  },
  data() {
    return {
      dataLis: {},
      treeData: [],
      treeFirst: false,
      id: "",
      Level: "",
      query: {
        user_id: "", // 用户id
      },
    };
  },
  created() {
    this.query.user_id = sessionStorage.getItem("id");
    this.index(this.query);
    this.Level = sessionStorage.getItem("grade");
    this.id = sessionStorage.getItem("user_code");
  },
  methods: {
    // 会员结构图
    async index(query) {
      try {
        this.treeData = [];
        const data = await index(query);
        this.treeData.push(data.data);
        this.dataLis = data;
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 45px;
}

.BuyVoucher_box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
}

.BuyVoucher_box_text1 {
  margin: 62px 0 0 132px;
  height: 42px;
  font-size: 56px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
}

.BuyVoucher_box_text2 {
  margin: 53px 0 0 0;
  width: 1918px;
  height: 2px;
  background: #bfbfbf;
}

.BuyVoucher_box_text3 {
  margin: 22px 0 0 123px;
  height: 23px;
  font-size: 30px;
  font-family: Arial;
  font-weight: 400;
  color: #999999;
  line-height: 110px;
}

.span1 {
  display: inline-block;
}

.span2 {
  margin-left: 120px;
  display: inline-block;
}

.footers {
  margin-top: 280px;
}

.span3 {
  position: absolute;
  top: 400px;
  left: 1000px;
  height: 20px;
  border: 2px solid #999999;
}

.footerss1 {
  position: absolute;
  top: 200px;
  left: 900px;
  width: 186px;
  height: 186px;
  border: 6px solid #b9c8f3;
  background: linear-gradient(0deg, #5f86f6 0%, #2152f1 100%);
  border-radius: 50%;
  line-height: 26px;
}

.span4 {
  position: absolute;
  top: 200px;
  left: 190px;
  height: 28px;
  font-size: 36px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 110px;
}
</style>
